<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
            status-icon scroll-into-view-options="true">
            <el-form-item label="商品分类：" prop="classify">
                <el-cascader placeholder="请选择" :props="props" filterable />
            </el-form-item>
            <el-form-item label="商品名称：" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="副标题：" prop="title">
                <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item label="商品品牌：" prop="brand">
                <el-select v-model="ruleForm.brand" placeholder="请选择品牌">
                    <el-option label="11" value="11" />
                    <el-option label="77777777777777" value="77777777777777" />
                    <el-option label="2334" value="2334" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍：">
                <el-input placeholder="请输入内容" v-model="ruleForm.desc" type="textarea" />
            </el-form-item>
            <el-form-item label="商品货号：" prop="code">
                <el-input v-model="ruleForm.code" />
            </el-form-item>
            <el-form-item label="商品售价：" prop="price">
                <el-input v-model="ruleForm.price" />
            </el-form-item>
            <el-form-item label="市场价：" prop="market">
                <el-input v-model="ruleForm.market" />
            </el-form-item>
            <el-form-item label="商品库存：" prop="inventory">
                <el-input v-model="ruleForm.inventory" />
            </el-form-item>
            <el-form-item label="计量单位：" prop="unit">
                <el-input v-model="ruleForm.unit" />
            </el-form-item>
            <el-form-item label="商品重量：" prop="weight" class="weight">
                <el-input v-model="ruleForm.weight" />
                <span>克</span>
            </el-form-item>
            <el-form-item label="排序：" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-button type="primary" class="next" @click="nextClick">下一步，填写商品促销</el-button>
        </el-form>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from '../../../request/api'
import useProduct from '../../../hooks/useProduct'
import dayjs from 'dayjs'
import type { CascaderProps } from 'element-plus'
import { useProductStore } from '../../../stores/addProduct'

let name = ref("")
let { getproductData, productData } = useProduct(api.product.getProductCategoryList, {
    keyword: name
})
getproductData()
const props: CascaderProps = {
    lazy: true,
    lazyLoad(node, resolve) {
        console.log(productData);
        const { level } = node
        console.log(level);
        productData.value.filter(() => {

        })        // const nodes = productData.forEach(element => {

        // });
        // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
        // resolve(nodes)
    },
}
// 如果上面表格条件完成 , 跳转下一步
let product = useProductStore()
const nextClick = () => {
    product.$patch({
        active: product.active + 1
    })
    console.log(product.active);

}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    classify: '',
    name: '',
    title: '',
    brand: '',
    desc: '',
    code: '',
    price: 0,
    market: 0,
    inventory: 0,
    unit: '',
    weight: 0,
    sort: 0
})

const rules = reactive<FormRules>({
    classify: [
        {
            required: true,
            message: '请选择商品分类',
            trigger: 'change',
        },
    ],
    name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' }
    ],
    title: [
        { required: true, message: '请输入商品副标题', trigger: 'blur' }
    ],
    brand: [
        {
            required: true,
            message: '请选择商品品牌',
            trigger: 'change',
        },
    ],
})
</script>

<style scoped lang="scss">
.demo-ruleForm {
    width: 600px;
    margin-top: 60px;
    margin-left: 20px;
}

.weight {
    display: flex;

    .el-input {
        width: 300px;
        margin-right: 20px;
    }
}

.next {
    margin-bottom: 50px;
    margin-left: 280px
}
</style>